<template>
    <div class="per_item">
        <div class="per_item_img">
            <van-image round :width="config.width" :height="config.width" :style="{ borderColor: config.color }"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <div class="dots" :style="{ backgroundColor: config.color }"></div>
            <div class="no" :style="{ backgroundColor: config.color }">No.{{ config.ranking }}</div>
        </div>
        <div class="per_item_name">{{ config.name }}</div>
        <span class="right">{{ config.time }}h</span>
    </div>
</template>

<script setup>
const props = defineProps({
    config: Object
})

</script>

<style lang="scss" scoped>
.per_item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .per_item_img {
        position: relative;
        height: 50px;
        display: flex;
        align-items: center;

        :deep(.van-image--round) {
            border-width: 3px;
            border-style: solid;
        }

        .dots {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            top: 6px;
            left: -10px;
        }

        .no {
            padding: 1px 4px;
            font-size: 12px;
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            border-radius: 4px;
        }
    }

    .per_item_name {
        font-size: 12px;
        padding: 10px 0 2px;
    }
}

span {
    font-size: 12px;
    color: #8c8c8c;

    &.right {
        color: #000;
        padding: 3px 10px;
        background-color: #DCDCDC;
        border-radius: 4px;
    }
}
</style>